<template>
    <div class="artist-info-box" v-show="simiArtist.length !== 0">
        <div class="base">
            <div class="left-box">
                <div class="artist-box">
                    <div class="ab-top">
                        <p class="text-2xl">{{ arName }}</p>
                        <div class="my-auto ml-auto">
                            <div class="ab-top-icon flex items-center">
                                <div>
                                    <div class="flex items-center">
                                        <n-icon>
                                            <svg t="1628654428434" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                 xmlns="http://www.w3.org/2000/svg" p-id="1894" width="20" height="20">
                                                <path
                                                    d="M512.451579 545.507144c-148.479097 0-269.140942-120.842477-269.140942-269.140942S363.972482 7.22526 512.451579 7.22526s269.140942 120.842477 269.140942 269.140942-120.661845 269.140942-269.140942 269.140942z m0-477.589698c-114.881637 0-208.448756 93.567119-208.448757 208.448756s93.567119 208.448756 208.448757 208.448757S720.900335 391.247839 720.900335 276.366202 627.333216 67.917446 512.451579 67.917446zM896.654789 1016.232845H128.248368c-47.506086 0-85.980596-38.655142-85.980596-85.980596v-58.163344l1.806315-5.057683c57.802081-160.220145 250.355265-272.211678 468.377492-272.211677S923.026989 706.811078 980.82907 867.031222l1.806315 5.057683V930.252249c0 47.506086-38.655142 85.980596-85.980596 85.980596zM103.140589 882.926795V930.252249c0 13.908626 11.379785 25.288411 25.288411 25.288411h768.225789c13.908626 0 25.288411-11.379785 25.288411-25.288411v-47.506086C870.463221 748.717587 703.017816 655.692362 512.451579 655.692362S154.439936 748.717587 103.140589 882.926795z"
                                                    p-id="1895" fill="#707070"></path>
                                            </svg>
                                        </n-icon>
                                        <p class="flex items-center ml-1 hover:underline cursor-pointer">个人首页</p>
                                    </div>
                                </div>
                                <div>
                                    <div class="flex items-center ml-4">
                                        <n-icon>
                                            <svg t="1628241310757" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                 xmlns="http://www.w3.org/2000/svg" p-id="5958" width="20" height="20">
                                                <path
                                                    d="M799.97 959.56H224.03c-65.18 0-118.22-53.01-118.22-118.19v-659.2c0-65.18 53.04-118.22 118.22-118.22h409.16c31.58 0 61.27 12.31 83.59 34.63l166.78 166.78c22.32 22.32 34.63 52.01 34.63 83.59v492.42c0 65.18-53.04 118.19-118.22 118.19zM224.03 131.88c-27.73 0-50.29 22.56-50.29 50.29v659.2c0 27.7 22.56 50.25 50.29 50.25h575.94c27.73 0 50.29-22.56 50.29-50.25V348.95c0-13.43-5.24-26.07-14.73-35.56L668.75 146.61c-9.49-9.49-22.12-14.73-35.56-14.73H224.03z"
                                                    p-id="5959" fill="#707070"></path>
                                                <path
                                                    d="M644.87 750.18a33.91 33.91 0 0 1-15.82-3.91l-117.06-61.53-117.03 61.53c-11.41 6.04-25.24 5.08-35.79-2.59-10.45-7.6-15.69-20.47-13.5-33.2l22.36-130.33-94.74-92.35c-9.25-9.02-12.57-22.52-8.59-34.8a33.975 33.975 0 0 1 27.43-23.12l130.89-19.04 58.51-118.59c11.41-23.22 49.49-23.22 60.9 0l58.55 118.59 130.89 19.04A33.975 33.975 0 0 1 759.3 453c3.98 12.27 0.66 25.77-8.59 34.8l-94.74 92.35 22.36 130.33a33.929 33.929 0 0 1-13.5 33.2c-5.9 4.31-12.93 6.5-19.96 6.5zM511.98 612.39c5.44 0 10.85 1.29 15.82 3.91l71.95 37.81L586.02 574a33.964 33.964 0 0 1 9.75-30.05l58.21-56.76-80.44-11.71c-11.08-1.59-20.63-8.56-25.57-18.58l-35.99-72.88-35.96 72.88a33.927 33.927 0 0 1-25.57 18.58l-80.44 11.71 58.21 56.76a33.973 33.973 0 0 1 9.75 30.05l-13.73 80.11 71.91-37.81c4.99-2.61 10.39-3.91 15.83-3.91z"
                                                    p-id="5960" fill="#707070"></path>
                                            </svg>
                                        </n-icon>
                                        <p class="flex items-center ml-1  hover:underline cursor-pointer">收藏歌手</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ab-content">
                        <n-image width="1013" height="370" style="max-height: 370px" object-fit="cover"
                                 :src="coverUrl"></n-image>
                        <div class="content-choose">
                            <!--                            <div v-for="(item, index) in chooseTitleList" :key="index">-->
                            <!--                                <div class="h-0.5"-->
                            <!--                                     :style="{borderTopColor: borderTopColor[index],borderTopWidth: borderTop[index]}"></div>-->
                            <!--                                <div-->
                            <!--                                    class=" flex justify-center items-center h-8 cursor-pointer border-b border-l border-r"-->
                            <!--                                    :style="{borderBottomColor: borderBottomColor[index],borderLeftColor: borderXColor[index], borderRightColor: borderXColor[index]}"-->
                            <!--                                    @click="changeChooseTag(index)">-->
                            <!--                                    {{ item }}-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <div class="content-item-box">
                                <n-card>
                                    <n-tabs default-value="热门作品" justify-content="space-evenly" type="line">
                                        <n-tab-pane name="热门作品" tab="热门作品">
                                            <div>
                                                <song-list-detail :track-count="trackCount"
                                                                  :tracks="tracks.slice(pageItemCount * (page - 1), pageItemCount * page)"
                                                                  :is-show-play-count="false"></song-list-detail>
                                                <div class="flex items-center justify-center mt-2">
                                                    <n-pagination v-model:page="page" :page-count="pageCount"
                                                                  show-quick-jumper/>
                                                </div>
                                            </div>
                                        </n-tab-pane>
                                        <n-tab-pane name="所有专辑" tab="所有专辑">
                                            <div>
                                                <all-albums :album-list="albumList"
                                                            :album-size="albumSize"></all-albums>
                                            </div>
                                        </n-tab-pane>
                                        <n-tab-pane name="相关mv" tab="相关mv">
                                            <div class="grid grid-cols-5 gap-y-4">
                                                <div v-for="(item, index) in mvs" :key="index">
                                                    <div :title="item.name" style="width: 150px"
                                                         class="border border-white hover:border-red-600"
                                                         @click="getRouterToVideoPage(item)">
                                                        <n-image
                                                            width="150"
                                                            :style="{ border: '1px solid #999999'}"
                                                            :src="item.imgurl + '?param=200y200'">
                                                        </n-image>
                                                        <div>{{ calString(item.name, 9) }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </n-tab-pane>
                                        <n-tab-pane name="艺人介绍" tab="艺人介绍">
                                            <div class="mt-6">
                                                <span class="font-bold border-l-4 border-red-600">{{ arName }}简介</span>
                                                <p>{{ briefDesc }}</p>
                                                <div class="mt-6" v-for="(item, index) in introduction" :key="index">
                                                    <span class="font-bold">{{ item.ti }}</span>
                                                    <p v-for="(itdItem, itemIdx) in introductionItemArr[index]"
                                                       :key="itemIdx">
                                                        {{ itdItem }}
                                                    </p>
                                                </div>
                                            </div>
                                        </n-tab-pane>
                                    </n-tabs>
                                </n-card>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-box">
                <div class="m-4 p-2">
                    <simi-artist :artist-list="simiArtist.slice(0, 16)"></simi-artist>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import {getArAllDesc, getArtistDetail, getArtistTop, getSimiArtist} from "@/network/artist/artist";
import {useRoute, useRouter} from "vue-router";
import {NImage, NIcon, NPagination, NCard, NTabs, NTabPane} from 'naive-ui';
import SongListDetail from "@/components/song/SongListDetail";
import SimiArtist from "@/components/song/SimiArtist";
import {getArtistAlbum} from "@/network/song/album-list";
import AllAlbums from "@/components/song/AllAlbums";
import {useStore} from "vuex";
import {getArtistMv} from "@/network/data/video";
import {calString} from "@/util/cal";

export default {
    name: "ArtistInfo",
    setup() {
        const TAG = "ArtistInfo.vue";
        const route = useRoute();
        const router = useRouter();
        const store = useStore();
        const artistInfo = reactive({
            id: -1,
            arName: '',
            arId: -1,
            coverUrl: '',
            introduction: [],
            // 介绍解析后的数组
            introductionItemArr: [],
            briefDesc: '',
            tracks: [],
            trackCount: 0,
            page: 1,
            pageCount: 1,
            pageItemCount: 10,
            simiArtist: [],
            albumList: [],
            albumSize: 0,
            mvs: []
        })
        // 图片下面四个选项的设置
        const contentChooseSetting = reactive({
            borderTopColor: new Array(4).fill('#f8f8f8'),
            borderBottomColor: new Array(4).fill('#676767'),
            // 左右边框
            borderXColor: new Array(4).fill('#f8f8f8'),
            borderTop: new Array(4).fill('2px'),
            lastIndex: 0,
            currentIndex: 0,
            chooseTitleList: ['热门作品', '所有专辑', '相关mv', '艺人介绍']
        })
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        
        // const changeChooseTag = (index) => {
        //     if (index === contentChooseSetting.currentIndex) return;
        //     contentChooseSetting.lastIndex = contentChooseSetting.currentIndex;
        //     contentChooseSetting.currentIndex = index;
        //     contentChooseSetting.borderTopColor[index] = '#d12f30';
        //     contentChooseSetting.borderTopColor[contentChooseSetting.lastIndex] = '#f8f8f8';
        //     contentChooseSetting.borderBottomColor[contentChooseSetting.lastIndex] = '#676767';
        //     contentChooseSetting.borderBottomColor[index] = '#f8f8f8';
        //     contentChooseSetting.borderXColor[index] = '#676767';
        //     contentChooseSetting.borderXColor[contentChooseSetting.lastIndex] = '#f8f8f8';
        // }
        const init = () => {
            artistInfo.id = route.query.id;
            getArtistDetail(artistInfo.id).then(res => {
                artistInfo.arName = res.data.data.artist.name;
                artistInfo.arId = res.data.data.artist.id;
                artistInfo.coverUrl = res.data.data.artist.cover;
                artistInfo.albumSize = res.data.data.artist.albumSize;
                
                getArtistAlbum(artistInfo.id, artistInfo.albumSize).then(res => {
                    artistInfo.albumList = res.data.hotAlbums;
                })
            })
            getArAllDesc(artistInfo.id).then(res => {
                artistInfo.briefDesc = res.data.briefDesc;
                artistInfo.introduction = res.data.introduction;
                // 将简介数组格式化为普通字符串数组
                for (let i = 0; i < artistInfo.introduction.length; i++) {
                    artistInfo.introductionItemArr[i] = res.data.introduction[i].txt.split('\n');
                }
            })
            getArtistTop(artistInfo.id).then(res => {
                artistInfo.tracks = res.data.songs;
                artistInfo.trackCount = res.data.songs.length;
                let object = res.data.songs.length / 10;
                if (Number.isInteger(object)) {
                    artistInfo.pageCount = object;
                } else {
                    artistInfo.pageCount = parseInt(object) + 1;
                }
            })
            getArtistMv(artistInfo.id).then(res => {
                console.log(res);
                artistInfo.mvs = res.data.mvs;
            })
            getSimiArtist(artistInfo.id).then(res => {
                artistInfo.simiArtist = res.data.artists;
            })
            // contentChooseSetting.borderTop[contentChooseSetting.currentIndex] = '2px';
            // contentChooseSetting.borderTopColor[contentChooseSetting.currentIndex] = '#d12f30';
            // contentChooseSetting.borderBottomColor[contentChooseSetting.currentIndex] = '#f8f8f8';
            // contentChooseSetting.borderXColor[contentChooseSetting.currentIndex] = '#676767';
            beLoading();
        }
        onMounted(() => {
            init();
        })
        
        const getRouterToVideoPage = (item) => {
            if (typeof item.vid === 'undefined') {
                // 类型是MV
                router.push({path: '/video', query: {id: item.id, type: 1}});
            } else {
                // 类型是视频
                router.push({path: '/video', query: {id: item.vid, type: 5}});
            }
        }
        return {
            ...toRefs(artistInfo),
            ...toRefs(contentChooseSetting),
            // changeChooseTag,
            calString,
            getRouterToVideoPage
        }
    },
    components: {
        NImage,
        NIcon,
        SongListDetail,
        NPagination,
        SimiArtist,
        AllAlbums,
        NCard,
        NTabs,
        NTabPane
    }
    
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.artist-info-box {
    width: $client-width;
    background: #f4f4f4;
    
    .left-box {
        @apply w-4/5 border bg-white;
        .artist-box {
            @apply mx-16 mt-6 mb-4;
            .ab-top {
                @apply flex;
                .ab-top-icon {
                    @apply ml-2;
                }
            }
            
            .ab-content {
                @apply w-full;
                .content-choose {
                    @apply w-full;
                    background: #f8f8f8;
                    border-style: solid;
                    
                    border: solid 1px #676767;
                }
                
                .content-item-box {
                    
                    min-height: $content-item-box-height;
                    
                    p {
                        @apply my-1;
                        line-height: 25px;
                        color: #666;
                        text-indent: 2em;
                    }
                }
            }
        }
    }
    
    .right-box {
        @apply w-1/5 border bg-white;
    }
}

</style>